<template>
	<common-page :title="$t('register.reg')">
		<el-steps :active="stepActive" simple finish-status="success">
			<el-step :title="$t('register.accountInfo')"/>
			<el-step :title="$t('register.completeReg')"/>
		</el-steps>
		<el-form v-if="stepActive===0" ref="stepForm_0" :model="form" :rules="rules" :label-width="120">
			<el-form-item :label="$t('register.username')" prop="username">
				<el-input v-model="form.username" :placeholder="$t('register.usernamePlaceholder')"></el-input>
			</el-form-item>
			<el-form-item :label="$t('register.smsCode')" prop="smsCode">
				<div class="login-msg-yzm">
					<el-input v-model="form.smsCode" :placeholder="$t('register.smsCodePlaceholder')"></el-input>
					<el-button @click="sendRegisterSms" :disabled="disabled">{{ this.$t('login.smsGet') }}
						<span v-if="disabled"> ({{ time }})</span>
					</el-button>
				</div>
			</el-form-item>
			<el-form-item :label="$t('register.nickname')" prop="nickname">
				<el-input v-model="form.nickname" :placeholder="$t('register.nicknamePlaceholder')"></el-input>
			</el-form-item>
			<el-form-item :label="$t('register.password')" prop="password">
				<el-input v-model="form.password" type="password" show-password :placeholder="$t('register.passwordPlaceholder')"></el-input>
				<sc-password-strength v-model="form.password"></sc-password-strength>
			</el-form-item>
			<el-form-item :label="$t('register.passwordConfirm')" prop="password2">
				<el-input v-model="form.passwordConfirm" type="password" show-password
						  :placeholder="$t('register.passwordConfirmPlaceholder')"></el-input>
			</el-form-item>
			<el-form-item label="" prop="agree">
				<el-checkbox v-model="form.agree" :label="$t('other.readAgree')"></el-checkbox>
				<span class="link" @click="showAgree=true">{{ $t('other.platformService') }}</span>
			</el-form-item>
		</el-form>
		<div v-if="stepActive===1">
			<el-result icon="success" :title="$t('register.regSuccess')" :sub-title="$t('register.mobileLoginTip')">
				<template #extra>
					<el-button type="primary" @click="goLogin">{{ $t('register.goLogin') }}</el-button>
				</template>
			</el-result>
		</div>
		<el-form style="text-align: center;">
			<el-button v-if="stepActive===0" @click="goLogin">{{ $t('register.returnLogin') }}</el-button>
			<el-button v-if="stepActive===0" type="primary" @click="save">{{ $t('register.submit') }}</el-button>
		</el-form>
		<el-dialog v-model="showAgree" :title="$t('other.platformService')" :width="800" destroy-on-close>
			{{ $t('other.platformService') }}
			<template #footer>
				<el-button @click="showAgree=false">{{ $t('register.cancel') }}</el-button>
				<el-button type="primary" @click="showAgree=false;form.agree=true;">{{ $t('other.readAgree') }}</el-button>
			</template>
		</el-dialog>
	</common-page>
</template>

<script>
import scPasswordStrength from '@/components/scPasswordStrength';
import commonPage from './components/commonPage'

export default {
	components: {
		commonPage,
		scPasswordStrength
	},
	data() {
		return {
			stepActive: 0,
			showAgree: false,
			disabled: false,
			time: 0,
			form: {
				username: "",
				smsCode: "",
				nickname: "",
				password: "",
				passwordConfirm: "",
				email: "",
				agree: false
			},
			rules: {
				nickname: [
					{required: true, message: '请输入昵称'}
				],
				smsCode: [
					{required: true, message: '请输入验证码'}
				],
				username: [
					{required: true, message: '请输入手机号'}
				],
				password: [
					{required: true, message: '请输入密码'}
				],
				passwordConfirm: [
					{required: true, message: '请再次输入密码'},
					{
						validator: (rule, value, callback) => {
							if (value !== this.form.password) {
								callback(new Error('两次输入密码不一致'));
							} else {
								callback();
							}
						}
					}
				],
				agree: [
					{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error('请阅读并同意协议'));
							} else {
								callback();
							}
						}
					}
				],
				email: [
					{required: true, message: '请输入邮箱地址'}
				]
			}
		}
	},
	mounted() {

	},
	methods: {
		async sendRegisterSms() {
			// 发送短信
			await this.$API.auth.sms.post({
				mobile: this.form.username,
				smsType: 'REGISTER'
			});

			this.$message.success(this.$t('login.smsSent'))
			this.disabled = true
			this.time = 60
			const t = setInterval(() => {
				this.time -= 1
				if (this.time < 1) {
					clearInterval(t)
					this.disabled = false
					this.time = 0
				}
			}, 1000);
		},
		save() {
			const formName = `stepForm_0`
			this.$refs[formName].validate((valid) => {
				if (valid) {
					const data = {
						username: this.form.username,
						password: this.form.password,
						smsCode: this.form.smsCode,
						nickname: this.form.nickname
					};

					// 注册
					this.$API.auth.register.post(data).then(() => {
						this.stepActive += 1;
					});
				} else {
					return false
				}
			})
		},
		goLogin() {
			this.$router.push({
				path: '/login'
			})
		}
	}
}
</script>

<style scoped>
.login-msg-yzm {
	display: flex;
	width: 100%;
}

.login-msg-yzm .el-button {
	margin-left: 10px;
	--el-button-size: 42px;
}
</style>
